<!--
Module: NBIOT 配置页面
Author: 吴金根
date:2017/11/14
-->
<template>
<div class="page-box">
  <Nav :indexs="1"  @clickit="gettoken"></Nav>
   <div class="pageconfig-page-box">
      <div class="pageconfig-page">
          <h6 class="title">基础配置页面</h6>
          <div class="my-server">
              
              <div class="my-server-infos">
                  <el-form ref="form" :rules="rules" :model="form"  label-position="left">
                    <div class="rows-1 rows-col-show">
                          <h6 class="my-server-title">服务</h6>
                          <div class="e-form-group">
                              <el-form-item label="服务器IP：" prop="serverIp" class="input-infos">
                                  <el-input v-model="form.serverIp" placeholder=""></el-input>
                              </el-form-item>
                              <el-form-item label="端口：" prop="serverPort"  class="input-infos dkinput">
                                <el-input v-model.number="form.serverPort" placeholder=""></el-input>
                              </el-form-item>
                          </div>
                    </div>
                    <div class="rows-2 rows-col-show">
                          <h6 class="my-server-title">转发</h6>
                        
                          <div class="e-form-group">
                              <div class="checkbox-title">
                                  协议过滤
                              </div>
                              <div class="check-box">
                                  <el-checkbox-group  v-model="form.protocols">
                                      <el-checkbox v-for="item in protocols" :label="item" :key="item"></el-checkbox>
                                  </el-checkbox-group>
                              </div>
                          </div>

                    </div>
                  
                      <div class="rows-3 rows-1 rows-col-show">
                          <div class="add-btn">
                              <el-button  plain @click="adddest()">
                              <i class="el-icon-plus el-icon--left" ></i>添加目的ip</el-button>
                          </div>
                          <template v-for="(item,index) in dest" >
                              <div class="e-form-group" :key="item">
                                  <el-form-item label="目的IP："
                                    :rules="[
                                        { required: true, message: '目的IP不能为空'},
                                    ]"
                                  class="input-infos">
                                      <el-input v-model="item.ip"></el-input>
                                  </el-form-item>
                                  <el-form-item label="端口："
                                  :rules="[
                                        { required: true, message: '端口不能为空'},
                                        { type: 'number', message: '端口必须为数字值'}
                                    ]"
                                  class="input-infos dkinput">
                                    <el-input v-model="item.port" ></el-input>
                                  </el-form-item>
                                  <i class="el-icon-delete" @click="deletedest(index)"></i>
                              </div>
                          </template>
                          
                    </div>
                      <div class="rows-4 rows-col-show">
                          <el-form-item class="submit-btn">
                              <el-button type="primary" @click="saveForm('form')">保存</el-button>
                              <el-button @click="resetform()">取消</el-button>
                          </el-form-item>
                    </div>
                    </el-form>
              </div>
          </div>
      </div>
  </div>
</div>
</template>
<script>
import Nav from "../components/nav.vue";
export default {
  components: {
    Nav
  },
  data() {
    return {
      form: {
        //表单信息
        serverIp: "", //服务器IP
        serverPort: "", //服务器端口
        protocols: [], //服务器协议
        dest: [] //ip数组
      },
      token: "", //用户登录返回参数
      protocols: [],
      dest: [], //目的IP数组
      rules: {
        serverIp: [{ required: true, message: "服务器IP不能为空。", trigger: "blur" }],
        serverPort: [
          { required: true, message: "服务器端口不能为空" },
          { type: "number", message: "服务器端口为数字值" }
        ]
      }
    };
  },
  computed: {},
  methods: {
    adddest() {
      //新增IP
      let self = this;
      let obj = {};
      obj.ip = "";
      obj.port = "";
      self.dest.push(obj);
    },
    deletedest(i) {
      //删减IP
      let self = this;
      self.dest.splice(i, 1);
    },
    saveForm(form) {
      let self = this;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.getdest(); //获取Ip数组

          jQuery.ajax({
            type: "POST",
            url: "/unitalk/v1.0/baseconfig/update.json",
            contentType: "application/json",
            data: JSON.stringify(self.form),
            dataType: "json",
            success: function(rep) {
              // self.loading = false;
              if (typeof rep == "string") {
                try {
                  rep = JSON.parse(rep);
                } catch (err) {
                  rep = {
                    Code: 99999,
                    Message: "数据初始化失败，请稍后再试！"
                  };
                }
              }
              if (rep.Code == 0) {
                self.$message({
                  message: "数据保存成功",
                  type: "success"
                });

                self.getdata(); //重新查询数据
              } else {
                self.$message.error(rep.Message);
              }
            }
          });
        } else {
          return false;
        }
      });
    },
    resetform() {
      //取消就是重新刷新
      let self = this;
      self.getdata();
      // this.$router.go(this.$router.currentRoute)
    },
    getdest() {
      let self = this;
      let newarr = [];
      $.each(self.dest, function(i, item) {
        if (item.ip != "" || item.port != "") {
          newarr.push(item);
        }
      });
      self.form.dest = newarr;
    },
    gettoken(v) {
      //获取登录参数
      let self = this;
      self.token = v;
       self.getdata();
    },
    getdata() {
      let self = this;
      //读取数据
      jQuery.ajax({
        type: "POST",
        url: "/unitalk/v1.0/baseconfig.json",
        contentType: "application/json",
        data: JSON.stringify({
          Token: self.token
        }),
        dataType: "json",
        success: function(rep) {
          if (typeof rep == "string") {
            try {
              rep = JSON.parse(rep);
            } catch (err) {
              rep = {
                Code: 99999,
                Message: "登获取数据失败，请稍后再试！"
              };
            }
          }
          if (rep.Code == 0) {
            self.form.serverIp = rep.Response.serverIp;
            self.form.serverPort = rep.Response.serverPort;
            self.dest = rep.Response.dest;
            self.protocols = rep.Response.protocols;
          } else {
            self.$message.error(rep.Message);
          }
        }
      });
    }
  },
  mounted: function() {
    let self = this;
    /*------执行登录获取参数------*/
    self.gettoken();
    /*------执行用户基本信息------*/
   
  },
  watch: {}
};
</script>


